<template>
  <div>
    <div class="block">
      <el-date-picker
        v-model="info.time"
        type="daterange"
        align="right"
        :clearable="false"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        :shortcuts="shortcuts"
      >
      </el-date-picker>
      <el-button style="margin-left: 30px" type="primary" @click="submit"
        >提交</el-button
      >
    </div>
    <div class="my-30px flex">
      <div
        class="mr-30px p-20px w-260px h-100px mb-30px bg-#56aae7 text-#fff mb-15px flex flex-item-center"
      >
        <SvgIcon
          class="mt--5px mr-5px"
          name="zhinan"
          color="#fff"
          width="60px"
          height="60px"
        />
        <div class="ml-7px">
          <p class="text-20px mb-10px">浏览量(PV)</p>
          <div class="text-24px">{{ info.pv_sum }}</div>
        </div>
      </div>
      <div
        class="p-20px w-260px h-100px mb-30px bg-#f46866 text-#fff mb-15px flex flex-item-center"
      >
        <SvgIcon
          class="mt--5px mr-5px"
          name="jiansuo"
          color="#fff"
          width="60px"
          height="60px"
        />
        <div class="ml-7px">
          <p class="text-20px mb-10px">访客数(UV)</p>
          <div class="text-24px">{{ info.uv_sum }}</div>
        </div>
      </div>
    </div>
    <div class="flex">
      <div ref="line" class="w-48% h-400px mr-30px"></div>
      <div ref="line2" class="w-48% h-400px"></div>
    </div>
    <div class="flex my-30px">
      <div class="w-600px h-400px mr-30px" ref="map"></div>
      <div class="w-600px h-400px" ref="map2"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { dayjs } from "element-plus";
import * as echarts from "echarts";
import {
  point_rank,
  user_rank,
  area_rank,
  country_rank,
  point_user_rank,
} from "@/api/back/statistical.ts";
import {
  shortcuts,
  line_option,
  line_option2,
  map_option_china,
  map_option_world,
} from "./data.config";
import { copy } from "@/utils/index";
import china from "@/assets/mapJson/data-city.json";
import world from "@/assets/mapJson/world.json";

const info = reactive({
  time: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
});
const time = ref([dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]);
const line = ref(null)
const line2 = ref(null)
const map = ref(null)
const map2 = ref(null)

onMounted(async () => {
  await submit();
});

const submit = async () => {
  await init_line(line.value, line_option, point_rank, "number");
  await init_line(line2.value, line_option2, user_rank, "uv_number");
  await init_map_china();
  await init_map_world();
  await get_statistical();
};

const get_statistical = async () => {
  const [start, end] = info.time;
  const params = {
    start,
    end,
  };
  const { data } = await point_user_rank(params);
  Object.keys(data).forEach((key) => {
    info[key] = data[key];
  });
};
get_statistical();

const init_line = async (ref, option, api, args) => {
  const lineChart = echarts.init(ref);

  const [start, end] = info.time;
  const params = {
    start,
    end,
  };
  const { xAxis, series } = option.value;
  const { data } = await api(params);
  xAxis[0].data = [];
  series[0].data = [];
  data.forEach((item) => {
    xAxis[0].data.push(item.date);
    series[0].data.push(item[args]);
  });
  lineChart.setOption(option.value);
};

const init_map_china = async () => {
  const mapChart = echarts.init(map.value);
  const [start, end] = info.time;
  const params = {
    start,
    end,
  };
  const { data } = await area_rank(params);
  let datas = [];

  for (const key in data) {
    datas.push({ name: key, value: data[key] });
  }
  echarts.registerMap("china", china);
  map_option_china.value.series[0].data = datas;
  mapChart.setOption(map_option_china);
};

const init_map_world = async () => {
  const mapChart = echarts.init(map2.value);
  const [start, end] = info.time;
  const params = {
    start,
    end,
  };
  const { data } = await area_rank(params);
  let datas = [];

  for (const key in data) {
    datas.push({ name: key, value: data[key] });
  }
  echarts.registerMap("world", china);
  map_option_world.value.series[0].data = world;
  mapChart.setOption(map_option_world);
};
</script>

<style scoped></style>
